<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8>
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>

<body onload="init()">
    <script src="build/three.min.js"></script>
    <script src="build/TrackballControls.js"></script>
    <script>
        //声明一些全局变量
        var renderer, camera, scene, geometry, material, mesh1, mesh2;
        var controls;
        //初始化渲染器
        function initRenderer() {
            renderer = new THREE.WebGLRenderer(); //实例化渲染器
            // 渲染器设置阴影效果

            renderer.shadowMapEnabled = true;
            renderer.setSize(window.innerWidth, window.innerHeight); //设置宽和高
            document.body.appendChild(renderer.domElement); //添加到dom
        }
        //初始化场景
        function initScene() {
            scene = new THREE.Scene();
            // 红线是X轴，绿线是Y轴，蓝线是Z轴
            var axesHelper = new THREE.AxesHelper(1000);
            //axesHelper.position.set(0,100,0);
            scene.add(axesHelper);
          
            //全局环境光 
            /**
             * AmbientLight 环境全局光
             * 环境光会照亮场景中所有的物体，在计算物体的颜色的时候，都会叠加上环境光的颜色。
            */
            var light2 = new THREE.AmbientLight("white"); // 创建一个灰色的环境光
            scene.add(light2);

           

        }

        //初始化相机
        function initCamera() {
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 120); //实例化相机
            camera.position.set(0, 0, 20);
            controls = new THREE.TrackballControls(camera, renderer.domElement);
        }

        //创建模型
        function initMesh() {
            // var spriteMaterial = new THREE.SpriteMaterial( { color: 0xffffff } );
            // var sprite = new THREE.Sprite( spriteMaterial );
            // scene.add( sprite );



            var spriteMap = new THREE.TextureLoader().load( "fengjing.jpg" );
            var spriteMaterial = new THREE.SpriteMaterial( { map: spriteMap, color: 0xffffff } );
            var sprite = new THREE.Sprite( spriteMaterial );

            sprite.position.x=3
            scene.add( sprite );


         

            
        }

        //运行动画
        function animate() {
            requestAnimationFrame(animate); //循环调用函数
            controls.update();

            renderer.render(scene, camera); //渲染界面
        }
        //初始化函数，页面加载完成是调用
        function init() {
            initRenderer();
            initScene();
            initCamera();
            initMesh();
            animate();
        }
    </script>
</body>